<template>
     <div class="login-container">
    <div class="decoration-dots"></div>

    
    <div class="login-card">

      <div class="login-header">
        <div class="login-title">
        <h1 class="title">Edu AI</h1>
        <p class="subtitle">智能教育平台</p>
      </div>
      <div class="login-center">
      <form class="login-form" @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="userName">用户名</label>
          <input 
            id="userName"
            v-model="loginForm.userName" 
            type="text" 
            placeholder="请输入用户名"
            required
          />
        </div>
        
        <div class="form-group">
          <label for="passWord">密码</label>
          <input 
            id="passWord"
            v-model="loginForm.passWord" 
            type="password" 
            placeholder="请输入密码"
            required
          />
        </div>
        
        <div class="form-options">
          <label class="remember-me">
            <input type="checkbox" v-model="loginForm.remember">
            <span>记住我</span>
          </label>
          <a href="#" class="forgot-password">忘记密码？</a>
        </div>
        
        <button type="submit" class="login-btn" :disabled="loading">
          <span v-if="loading">登录中...</span>
          <span v-else>登录</span>
        </button>
      </form>
      
      <div class="login-footer">
        <p>还没有账号？ <router-link to="/register" class="register-link">立即注册</router-link></p>
      </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { UserLogin } from '@/api/login'
const router = useRouter()
const loading = ref(false)

const loginForm = reactive({
  userName: '',
  passWord: '',
  remember: false
})

const handleLogin =() => {
  if (!loginForm.userName || !loginForm.passWord) {
    alert('请填写完整的登录信息')
    return
  }
  loading.value = true
  UserLogin(loginForm).then(res => {
    loading.value = false
    if (res.code === 200) {
      // 登录成功后跳转到主页
      router.push('/home')
      alert('登录成功！')
    } else {
      alert(res.msg || '登录失败')
    }
  })
  
}
</script>

<style lang="scss" scoped>

.login-container{
  display: flex;
  justify-content: center;
  align-items: center;  
  border: #764ba2 solid 1px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
  
  // 科技网格背景
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px),
      radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(0, 255, 255, 0.08) 0%, transparent 50%);
    background-size: 50px 50px, 50px 50px, 300px 300px, 400px 400px, 200px 200px;
    animation: grid-move 15s linear infinite;
    pointer-events: none;
    z-index: 1;
  }
  
  // 科技电路图案
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
      linear-gradient(45deg, transparent 48%, rgba(0, 255, 255, 0.05) 49%, rgba(0, 255, 255, 0.05) 51%, transparent 52%),
      linear-gradient(-45deg, transparent 48%, rgba(255, 0, 255, 0.03) 49%, rgba(255, 0, 255, 0.03) 51%, transparent 52%);
    background-size: 80px 80px, 120px 120px;
    background-position: 0 0, 40px 40px;
    animation: circuit-pulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
  }
}
.login-card{
  width: 600px;
  height: 500px;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(0, 255, 255, 0.1),
    inset 0 0 20px rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.2);
  
  &::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
      rgba(0, 255, 255, 0.3) 0%, 
      rgba(255, 0, 255, 0.3) 25%, 
      rgba(0, 255, 255, 0.3) 50%, 
      rgba(255, 0, 255, 0.3) 75%, 
      rgba(0, 255, 255, 0.3) 100%);
    border-radius: 12px;
    z-index: -1;
    animation: border-glow 3s linear infinite;
  }
}
.login-header{
    margin:25px;
    width: 550px;
    height: 450px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 10px 10px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-title{
    margin-top:10px
}
.title{
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 10px;
    animation: neon-glow 2s ease-in-out infinite alternate;
    color: #fafefe;
}
.subtitle{
    font-size: 15px;
}
.login-center{
    margin-top: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

}
.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    
    label {
        width: 100px;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
        text-align: center;
        flex-shrink: 0;
    }
    
    input {
        flex: 1;
        padding: 12px ;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 16px;
        transition: all 0.3s ease;
        
        &::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        
        &:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.8);
            background: rgba(255, 255, 255, 0.2);
        }
    }
}
.form-options{
    margin-bottom: 10px;
    a{
        margin:10px 
    }
}
button{
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 
      0 0 10px rgba(0, 255, 255, 0.2),
      inset 0 0 10px rgba(0, 255, 255, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.4),
        inset 0 0 20px rgba(0, 255, 255, 0.2);
      transform: translateY(-2px);
    }
}

// 科技网格移动动画
@keyframes grid-move {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 50px 50px, 50px 50px, 100px 100px, -100px -100px, 50px 50px;
  }
}

// 电路脉冲动画
@keyframes circuit-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

// 数字雨效果
@keyframes digital-rain {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

// 霓虹光效
@keyframes neon-glow {
  0%, 100% {
    text-shadow: 
      0 0 5px rgba(0, 255, 255, 0.5),
      0 0 10px rgba(0, 255, 255, 0.3),
      0 0 15px rgba(0, 255, 255, 0.2);
  }
  50% {
    text-shadow: 
      0 0 10px rgba(0, 255, 255, 0.8),
      0 0 20px rgba(0, 255, 255, 0.6),
      0 0 30px rgba(0, 255, 255, 0.4);
  }
}

// 科技装饰元素
.login-container {
  .decoration-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    
    &::before {
      content: '';
      position: absolute;
      top: 10%;
      left: 10%;
      width: 3px;
      height: 3px;
      background: rgba(0, 255, 255, 0.6);
      border-radius: 50%;
      box-shadow: 
        20px 30px 0 rgba(0, 255, 255, 0.4),
        40px 70px 0 rgba(255, 0, 255, 0.3),
        70px 40px 0 rgba(0, 255, 255, 0.5),
        90px 90px 0 rgba(255, 0, 255, 0.4),
        120px 20px 0 rgba(0, 255, 255, 0.3),
        150px 60px 0 rgba(255, 0, 255, 0.5),
        180px 80px 0 rgba(0, 255, 255, 0.2),
        200px 40px 0 rgba(255, 0, 255, 0.3);
      animation: tech-twinkle 2s ease-in-out infinite alternate;
    }
  }
  
  // 数字雨容器
  .digital-rain-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }
  
  // 数字雨效果
  .digital-rain {
    position: absolute;
    top: -20px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: rgba(0, 255, 255, 0.7);
    animation: digital-rain 8s linear infinite;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  }
}

@keyframes tech-twinkle {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

// 边框发光动画
@keyframes border-glow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

</style>
